<script>
	import { onMount } from 'svelte';
	import Vizzu from 'vizzu';
	import VizzuModule from 'vizzu/dist/cvizzu.wasm?url';
	// import VizzuModule from 'vizzu/dist';

	Vizzu.options({ wasmUrl: VizzuModule });
	let data = {
		dimensions: [
			{ name: 'Genres', values: ['Pop', 'Rock', 'Jazz', 'Metal'] },
			{ name: 'Kinds', values: ['Hard', 'Smooth', 'Experimental'] }
		],
		measures: [
			{
				name: 'Popularity',
				values: [
					[114, 96, 78, 52],
					[56, 36, 174, 121],
					[127, 83, 94, 58]
				]
			}
		]
	};
	let chart;

	onMount(() => {
		chart = new Vizzu('myVizzu', { data });
		chart.animate({
			config: {
				channels: {
					y: { set: ['Popularity'] },
					x: { set: ['Genres'] }
				}
			}
		});
	});
	function ttt() {
		chart.animate({
			config: {
				channels: {
					size: { set: ['Popularity'] }
				},
				geometry: 'circle'
			}
		});
	}
	function tt() {
		chart.animate({
			config: {
				channels: {
					lightness: { set: null },
					color: { attach: ['Genres'] }
				},
				legend: 'color'
			}
		});
	}
	// chart.animate({
	// 	color: 'Foo',
	// 	x: 'Baz',
	// 	geometry: 'circle'
	// });
</script>

<div id="myVizzu" style="width:800px; height:600px;" />
<button on:click={tt}>动画</button><button on:click={ttt}>柱体</button>
